import React, { useEffect } from 'react';
import { useIntl } from 'umi';
import { Modal, Form, Input, Select } from 'antd';

const WithdrawalModal: React.FC<{}> = (props) => {
  const intl = useIntl(); // 国际化
  const t = (id: any) => intl.formatMessage({ id }); // 写成传参方式
  const { open, hideModal, listData, form } = props; //  listData 接受父组件列表的数据

  const content = listData.content;
  const { TextArea } = Input;

  useEffect(() => {
    form.setFieldsValue({
      accountBalance: content,
    });
  }, [listData]);

  return (
    <div>
      <Modal
        title="全球付提现"
        open={open}
        onOk={hideModal}
        onCancel={hideModal}
        okText="确认"
        cancelText="取消"
        width={600}
      >
        <Form
          form={form}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 14 }}
          layout="horizontal"
        >
          <Form.Item
            // label="账户余额"
            label={t('form.acountbalance')}
            name="accountBalance"
          >
            <Input />
          </Form.Item>
          <Form.Item
            // label="提现金额"
            label={t('form.withdrawalAmount')}
            name="withdrawalMoney"
          >
            <Input />
          </Form.Item>
          <Form.Item
            // label="提现账户"
            label={t('form.WithdrawalAccount')}
            name="withdrawalAmount"
          >
            <Select>
              <Select.Option value="demo">Demo</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item
            // label="锁定方"
            label={t('form.LockingParty')}
            name="lockedParty"
          >
            <Select>
              <Select.Option value="demo">Demo</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item
            // label="交易密码"
            label={t('form.Transactionpassword')}
            name="password"
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            // label="备注"
            label={t('form.Remarks')}
            name="remarks"
          >
            <TextArea rows={2} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default WithdrawalModal;
